import React from 'react';
import { useNavigate } from 'react-router-dom';
import GestureLock from './GestureLock';
import { NavBar } from 'antd-mobile';

import CryptoJS from 'crypto-js';

const SetGesture = () => {
  const navigate = useNavigate();
  const handleSet = (pwd) => {
    const hashedPwd = CryptoJS.SHA256(pwd).toString();
    localStorage.setItem('gesturePwd', hashedPwd);
    navigate('/myprivacy');
  };
  const back = () => {
    navigate('/myprivacy');
  };
  return (
    <div style={{
      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      minHeight: '90vh',
      position: 'relative',
      overflow: 'hidden'
    }}>
      {/* 背景装饰 */}
      <div style={{
        position: 'absolute',
        top: '-50%',
        right: '-50%',
        width: '200%',
        height: '200%',
        background: 'radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%)',
        animation: 'float 6s ease-in-out infinite'
      }} />
      
      
      {/* 主内容区域 */}
      <div style={{
        padding: '20px',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        minHeight: 'calc(100vh - 50px)',
        position: 'relative',
        zIndex: 10
      }}>
        {/* 卡片容器 */}
        <div style={{
          background: 'rgba(255, 255, 255, 0.95)',
          borderRadius: '24px',
          padding: '40px 30px',
          boxShadow: '0 20px 60px rgba(0, 0, 0, 0.15)',
          backdropFilter: 'blur(20px)',
          border: '1px solid rgba(255, 255, 255, 0.3)',
          maxWidth: '420px',
          width: '100%',
          position: 'relative',
          overflow: 'hidden'
        }}>
          {/* 卡片装饰 */}
          <div style={{
            position: 'absolute',
            top: '-20px',
            right: '-20px',
            width: '80px',
            height: '80px',
            background: 'linear-gradient(45deg, #667eea, #764ba2)',
            borderRadius: '50%',
            opacity: 0.1
          }} />
          
          {/* 标题区域 */}
          <div style={{
            textAlign: 'center',
            marginBottom: '40px',
            position: 'relative'
          }}>
            <div style={{
              width: '60px',
              height: '4px',
              background: 'linear-gradient(90deg, #667eea, #764ba2)',
              borderRadius: '2px',
              margin: '0 auto 20px auto'
            }} />
            <h2 style={{
              color: '#333',
              margin: '0 0 12px 0',
              fontSize: '28px',
              fontWeight: '700',
              letterSpacing: '1px'
            }}>
              设置手势密码
            </h2>
            <p style={{
              color: '#666',
              margin: '0',
              fontSize: '15px',
              lineHeight: '1.6',
              opacity: 0.8
            }}>
              绘制您的手势密码，用于保护您的隐私安全
            </p>
          </div>
          
          {/* 手势锁组件 */}
          <div style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            marginTop: '20px'
          }}>
            <GestureLock type={2} onBack={handleSet} />
          </div>
        </div>
        
        {/* 底部提示 */}
        <div style={{
          marginTop: '30px',
          textAlign: 'center',
          color: 'rgba(255, 255, 255, 0.9)',
          fontSize: '14px',
          lineHeight: '1.5'
        }}>
          <p style={{ margin: '0 0 8px 0' }}>
            🔒 您的隐私安全是我们的首要任务
          </p>
          <p style={{ margin: '0', opacity: 0.8 }}>
            请牢记您的手势密码，忘记后将无法找回
          </p>
        </div>
      </div>
      
      {/* 添加CSS动画 */}
      <style jsx>{`
        @keyframes float {
          0%, 100% { transform: translateY(0px) rotate(0deg); }
          50% { transform: translateY(-20px) rotate(180deg); }
        }
      `}</style>
    </div>
  );
};

export default SetGesture;  